<template>
	<view class="tag_dialog">
		<!-- 已选中标签 -->
		<view class="selected_tag_list">
			<view v-bind:key="index" v-for="(tag, index) in caseObj.tags">
				<u-tag
					class="tag"
					size="mini"
					:closeable="true"
					:type="tag.type"
					:text="tag.value"
					@close="on_tag_remove(index)"
					mode="light"
				/>
			</view>
		</view>

		<!-- 全部标签 -->
		<view class="all_tag_container">
			<u-line color="#e4e7ed" />
			<view
				class="tag_list"
				v-for="(tag, type_index) in tag_list"
				v-bind:key="type_index"
			>
				<view class="tag_group">
					<view class="tag_group_name">{{ tag.key }}</view>
					<view class="tag_group_items">
						<view
							v-for="(tag_item, tag_index) in tag.value"
							v-bind:key="tag_index"
							><u-tag
								class="tag"
								size="mini"
								:type="tag.theme"
								:text="tag_item"
								mode="light"
								@click="on_tag_add(tag, tag_item)"
						/></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import _ from "lodash";

export default {
	data() {
		return {
			tag_list: this.$store.state.tag_list,
		};
	},
	props: ["caseObj"],
	methods: {
		on_tag_remove(index) {
			this.$emit("on_tag_remove", index);
		},
		on_tag_add(tag, tag_item) {
			this.$emit("on_tag_add", tag, tag_item);
		},
	},
};
</script>

<style scoped lang="scss">
.tag_dialog {
	min-height: 200rpx;
	padding: 24rpx;
	max-width: 700rpx;

	.selected_tag_list {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding-right: 40rpx;
		padding-bottom: 12rpx;

		.tag {
			margin-left: 5rpx;
		}
	}

	.all_tag_container {
		// padding: 24rpx;

		.tag_group {
			display: flex;
			flex-direction: row;

			.tag_group_name {
				margin-right: 12rpx;
			}

			.tag_group_items {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;

				.tag {
					margin-left: 5rpx;
				}
			}
		}
	}
}
</style>
